<template>
	<el-dialog v-model="visiable" :title="isAdd ? '添加标签' : '编辑标签'" width="45%" :before-close="handleClose">
		<div style="font-size: 14px; line-height: 30px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="标签名称：">
					<el-input v-model="form.name" placeholder="输入标签名称"></el-input>
				</el-form-item>

				<el-form-item label="服务说明：">
					<el-input v-model="form.explain" placeholder="输入服务说明，如：7天无理由"></el-input>
				</el-form-item>

				<el-form-item label="排序：">
					<el-input-number
						class="num-left"
						@blur="
							() => {
								form.order = form.order || 0;
							}
						"
						:max="999999999"
						:min="0"
						:controls="false"
						v-model="form.order"
						placeholder="输入排序"
					/>
				</el-form-item>

				<el-form-item label="标签颜色：" color-format="rgb">
					<el-color-picker v-model="form.colorCode" />
				</el-form-item>

				<el-form-item label="预览：">
					<div
						:style="{
							color: form.colorCode,
							borderRadius: '5px',
							fontSize: '10px',
							paddingLeft: '15px',
							paddingRight: '15px',
							backgroundColor: colorHextoRGB(form.colorCode),
						}"
					>
						{{ form.name }}
					</div>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" v-debounce="submit">提交</el-button>
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';
import { addLabel } from '/@/api/api';

const form = ref({});
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => null,
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
});

const visiable = ref(false);

watch(
	() => props.dialogVisible,
	(val) => {
		visiable.value = val;
		if (val) {
			if (!props.isAdd) {
				form.value = JSON.parse(JSON.stringify(props.row));
			}
		}
	}
);

async function submit() {
	let { code, data } = await addLabel({
		...form.value,
	});
	if (code == 200) {
		ElMessage.success('操作成功');
		handleClose();
	}
}

const emit = defineEmits(['handleClose']);

function handleClose() {
	form.value = {};
	emit('handleClose');
}

function colorHextoRGB(val) {
	if (!val) {
		return;
	}
	let color = val;
	var t = {},
		bits = color.length == 4 ? 4 : 8, //假设是shorthand。 #fff, 那么bits为4位, 每一位代表的个属性, 其他的为8位 每两位代表一个属性 #ffffff00
		mask = (1 << bits) - 1; //表示字节占位符。 向左移4位或8位，var a = (1 << 4 ) - 1 -> 10000 - 1,  a.toString(2); // 1111。或者 8位的 1111 1111
	color = Number('0x' + color.substr(1)); //#ff0000 转变为16进制0xff0000;
	if (isNaN(color)) {
		return null; // Color
	}
	['b', 'g', 'r'].forEach(function (x) {
		var c = color & mask;
		color >>= bits;
		t[x] = bits == 4 ? 17 * c : c; // 0xfff ， 一个f应该代表 255, 应该当[0-255]，按15等份划分，每一等份间隔 17。 所以获得的值须要乘以17, 才干表示rgb中255的值
	});
	// 这里的a可以自己给值，0-1,给1就是直接rgb颜色值了，给小数就是rgba的颜色值了
	t.a = 0.1;
	console.log('t', t);
	const rgba = 'rgba(' + t.r + ',' + t.g + ',' + t.b + ',' + t.a + ')';
	return rgba; // Color
}
</script>

<style>
.desc_label {
	width: 20px;
}
</style>
